<script setup lang="ts">
  import type { ExpressData } from '@/types/medicine'
  import { computed } from 'vue'

  //接收父子传参数据
  interface Props {
    logisticsInfo: ExpressData
  }
  const props = defineProps<Props>()

  console.log('props --->', props)

  //当前位置
  const current = computed(() => {
    return props.logisticsInfo.currentLocationInfo
  })

  //起点
  const start = computed(() => {
    return props.logisticsInfo.logisticsInfo[props.logisticsInfo.logisticsInfo.length - 1]
  })

  //终点
  const end = computed(() => {
    return props.logisticsInfo.logisticsInfo[0]
  })
</script>

<template>
  <map
    :scale="5"
    :longitude="parseFloat(current.longitude)"
    :latitude="parseFloat(current.latitude)"
    :markers="[
      {
        id: 0,
        latitude: parseFloat(start.latitude),
        longitude: parseFloat(start.longitude),
        iconPath: '/static/images/start.png',
        width: 20,
        height: 20,
      },
      {
        id: 1,
        latitude: parseFloat(end.latitude),
        longitude: parseFloat(end.longitude),
        iconPath: '/static/images/end.png',
        width: 20,
        height: 20,
      },
      {
        id: 2,
        latitude: parseFloat(current.latitude),
        longitude: parseFloat(current.longitude),
        iconPath: '/static/images/car_left.png',
        width: 20,
        height: 20,
      },
    ]"
    :polyline="[
      {
        points: props.logisticsInfo.logisticsInfo.map((item) => {
          return {
            latitude: parseFloat(item.latitude),
            longitude: parseFloat(item.longitude),
          }
        }),
        width: 4,
        color: '#ff0000',
      },
    ]"
    class="uni-map"
  ></map>
</template>

<style lang="scss">
  .uni-map {
    width: 100%;
    height: 470px;
  }
</style>
